<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <title>新增课程 - 企业培训平台</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <style>
        /* 整体布局调整 */
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh; /* 确保页面至少占满视口高度 */
            margin: 0;
            background-color: #f4f7f6; /* 可以添加一个背景色，让整体更协调 */
        }

        /* 确保 header 和 sidebar 的样式保持不变，它们应该在 body 的直接子元素 */
        /* 如果 header 和 sidebar 是独立的，并且不参与 main-content 的flex布局，
           则需要确保它们有自己的定位或宽度设置。
           这里假设它们是正常的块级元素，或者由 th:replace 引入的片段自身带有布局。*/

        /* 新增一个主内容区域，用于容纳表单，并占据剩余空间 */
        .main-content {
            display: flex; /* 使用 flexbox 布局 */
            flex: 1; /* 占据剩余垂直空间 */
            /* 调整这里来控制侧边栏和主内容的布局 */
            /* 假设您的侧边栏是独立的，并且已经占据了左侧空间 */
            /* 如果侧边栏和主内容需要并排，那么可能需要在 body 上做更大的布局调整 */
            /* 比如 body { display: flex; } 然后 side-bar, main-content 各自占据空间 */
        }

        /* 调整 .container 来居中表单容器 */
        .container {
            flex: 1; /* 让 container 占据 main-content 的所有可用宽度 */
            display: flex; /* 使用 flexbox 布局 */
            justify-content: center; /* 水平居中内容 */
            align-items: flex-start; /* 垂直方向从顶部开始对齐，防止表单跑到页面中间 */
            padding: 20px; /* 给容器加一些内边距 */
            box-sizing: border-box; /* 确保 padding 不会增加总宽度 */
        }

        /* 表单容器样式调整 */
        .form-container {
            max-width: 700px; /* 增加宽度，以容纳更多内容 */
            width: 100%; /* 确保在 max-width 范围内可以占据全部宽度 */
            margin: 0; /* 移除之前的 auto margin，由 flexbox 居中 */
            padding: 25px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #f9f9f9;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        /* 保持原有的表单元素样式 */
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #333;
        }
        .form-group input[type="text"],
        .form-group input[type="number"],
        .form-group textarea,
        .form-group select {
            width: calc(100% - 20px); /* Adjust for padding */
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .form-group textarea {
            resize: vertical;
            min-height: 80px;
        }
        .form-actions {
            text-align: right;
            margin-top: 20px;
        }
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
            text-decoration: none;
            display: inline-block;
            transition: background-color 0.3s ease;
        }
        .btn-primary {
            background-color: #007bff;
            color: white;
        }
        .btn-primary:hover {
            background-color: #0056b3;
        }
        .btn-secondary {
            background-color: #6c757d;
            color: white;
            margin-left: 10px;
        }
        .btn-secondary:hover {
            background-color: #5a6268;
        }
        /* 消息提示样式调整 */
        .alert {
            padding: 10px;
            margin-bottom: 15px;
            border-radius: 4px;
            text-align: center;
        }
        .alert-danger {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .alert-success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        /* 图片预览样式 */
        .image-preview {
            margin-top: 10px;
            max-width: 200px;
            border: 1px dashed #ccc;
            padding: 5px;
            border-radius: 4px;
        }
        .image-preview img {
            max-width: 100%;
            height: auto;
            display: block;
        }
    </style>
</head>
<body>
<div th:replace="~{fragments/header :: common-header}"></div>
<div class="main-content">
    <div class="container">
        <div class="form-container">
            <h2>新增课程</h2>

            <div th:if="${errorMessage}" class="alert alert-danger">
                <p th:text="${errorMessage}"></p>
            </div>
            <div th:if="${successMessage}" class="alert alert-success">
                <p th:text="${successMessage}"></p>
            </div>

            <form th:action="@{/course/add}" th:object="${course}" method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="couName">课程名称:</label>
                    <input type="text" id="couName" th:field="*{couName}" required>
                </div>

                <div class="form-group">
                    <label for="couIntroduction">课程简介:</label>
                    <textarea id="couIntroduction" th:field="*{couIntroduction}" rows="5"></textarea>
                </div>

                <div class="form-group">
                    <label for="couPic">课程封面图片:</label>
                    <input type="file" id="couPic" name="couPicFile" accept="image/*">
                    <div class="image-preview" id="imagePreview" style="display:none;">
                        <img id="previewImage" src="#" alt="图片预览">
                    </div>
                </div>

                <div class="form-group">
                    <label for="couPrice">课程价格 (积分):</label>
                    <input type="number" id="couPrice" th:field="*{couPrice}" min="0" required>
                </div>

                <div class="form-group">
                    <label for="couCataNum">课程章节数:</label>
                    <input type="number" id="couCataNum" th:field="*{couCataNum}" min="0" required>
                </div>

                <div class="form-group">
                    <label for="couParTypeId">课程主类别:</label>
                    <select id="couParTypeId" th:field="*{couParTypeId}">
                        <option value="">请选择主类别</option>
                        <option value="1">编程</option>
                        <option value="2">设计</option>
                        <option value="3">管理</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="couTypeId">课程子类别:</label>
                    <select id="couTypeId" th:field="*{couTypeId}">
                        <option value="">请选择子类别</option>
                        <option value="101">Java</option>
                        <option value="102">Python</option>
                        <option value="201">UI/UX</option>
                        <option value="301">项目管理</option>
                    </select>
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">提交</button>
                    <a th:href="@{/course/manage}" class="btn btn-secondary">取消</a>
                </div>
            </form>
        </div>
    </div>
</div>

<script th:inline="javascript">
    document.getElementById('couPic').addEventListener('change', function(event) {
        const [file] = event.target.files;
        if (file) {
            const previewImage = document.getElementById('previewImage');
            const imagePreview = document.getElementById('imagePreview');
            previewImage.src = URL.createObjectURL(file);
            imagePreview.style.display = 'block';
        } else {
            document.getElementById('imagePreview').style.display = 'none';
        }
    });
</script>

</body>
</html>